<?php /*a:3:{s:70:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\stroages\storageslist.html";i:1747733331;s:62:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\header.html";i:1747733208;s:61:"D:\phpstudy_pro\WWW\oldi-erp\app\admin\view\public\style.html";i:1747733208;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>

    <link rel="stylesheet" href="/static/css/element-ui@2.15.14.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui@2.15.14.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/echart.js"></script>


   <style scoped>
        .el-select-dropdown {
        padding: 0;
        }   
     .subtitle {
            display: flex;
            align-items: center;
            justify-content: center;           
        }
        .fw-bold{
            display: flex;
            align-items: center;
            justify-content: center; 
        }
        .flex{
            width: 100%;
        }
        .title {
            display: flex;
        }        

        .title::before {
            content: "";
            margin-right: 4px;
            display: block;
            height: 24px;
            width: 8px;
            background: #F2F2F2;
        }

        .prefix-icon {
            display: flex;
            align-items: center;
        }

        .prefix-icon::before {
            content: "";
            margin-right: 4px;
            display: block;
            height: 12px;
            width: 12px;
            background: #F2F2F2;
        }

   </style>
    
<style>
    html,
    body,
    #app {
        padding: 0;
        margin: 0;
    }    
    #contenr{
        padding: 0;
        margin: 10px;
    }
</style>

<body>
    <div id="app"  v-cloak>
        <div id="contenr">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>库存管理</el-breadcrumb-item>
        <el-breadcrumb-item>库存清单</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <div style="display: flex;margin-bottom: 20px;">     
        <el-card  style="height:100%;width: 100%;">          
            <div slot="header">
                <span class="title">库存清单概况</span>
            </div>

            <div class="flex" >
                <el-card shadow="never" class="ml-12" style="height:100%;">  
                    <el-row :gutter="8" style="display: flex">
                        <el-col :span="8">                     
                            <div  class="grid-item flex justify-center align-center flex-column mb-16">
                                <div class="fs-16 subtitle">总库存数（件）</div>
                                <div class="mt-6 fw-bold">{{total_inventory_quantity || 0}}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">                     
                            <div  class="grid-item flex justify-center align-center flex-column mb-16">
                                <div class="fs-16 subtitle">总库可售数（件）</div>
                                <div class="mt-6 fw-bold">{{total_available_quantity || 0}}</div>
                            </div>
                        </el-col>
                        <el-col :span="8">  
                            <div  class="grid-item flex justify-center align-center flex-column mb-16">
                                <div class="fs-16 subtitle">总库值($)</div>
                                <div class="mt-6 fw-bold">{{total_actual_price || 0}}</div> 
                            </div> 
                        </el-col>
                </el-card>
            </div>
        </el-card>       
     </div>   
    <el-card >
        <div style="display: flex;align-items: center;justify-content: flex-start;">      
            <el-form :inline="true" :model="searchForm" size="mini"  ref="refsearchForm">
            
                <el-form-item label="产品分类">
                    <el-select v-model="searchForm.category_name" placeholder="请选择库存变化类型" filterable clearable>
                        <el-option v-for="(item,index) in category_name" :key="index" :label="item" :value="index">
                        </el-option>
                    </el-select> 
                </el-form-item>
                <el-form-item label="仓库">
                    <el-select v-model="searchForm.storage_id" placeholder="请选择仓库" filterable clearable>
                        <el-option v-for="item in storages" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select> 
                </el-form-item>
                
                <el-form-item label="产品款号">
                    <el-input v-model="searchForm.localsku" placeholder="请输入产品款号" clearable filterable></el-input>
                </el-form-item>     
                
                <el-form-item label="入库时间">
                    <el-date-picker v-model="searchForm.create_time"  type="daterange"   :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"end-placeholder="结束日期"  align="right">
                    </el-date-picker>
                </el-form-item>                
                <el-form-item >
                    <el-button type="primary"  size="mini" plain @click="getSearch"  icon="el-icon-search" >查询</el-button>
                    <el-button type="success"  size="mini" plain @click="getExport"  icon="el-icon-s-promotion" >导出</el-button>
                </el-form-item> 
            </el-form>              
        </div>

        
        <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border    default-expand-all >
            <el-table-column   prop="name" label="仓库名称"> </el-table-column>   
            <el-table-column   prop="image" label="商品图片" width="100px"> 
                <template v-slot="{row}">
                    <el-image :src="row.image" style="width:100;height:50px" :preview-src-list="[row.image]"/></el-image>
                </template>
            </el-table-column> 
            <el-table-column   prop="localsku" label="产品款号"> </el-table-column> 
            <el-table-column   prop="pwin" label="产品条码"> </el-table-column> 
            <el-table-column   prop="category_name" label="产品类别"> </el-table-column> 
            <el-table-column   prop="place" label="产品货架"> </el-table-column> 
            <el-table-column   prop="actual_price" label="产品价格"> </el-table-column> 
            <el-table-column   prop="inventory_quantity" label="库存数(件)"> </el-table-column> 
            <el-table-column   prop="available_quantity" label="可售数(件)"> </el-table-column> 
            <el-table-column   prop="stock_age" label="库龄" width="150px"> </el-table-column> 
            <el-table-column   prop="create_time" label="入库时间" width="180px"> </el-table-column> 
        </el-table>

        <!-- page -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
            :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination> 
    </el-card>  
</div>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {    
                storages:<?php echo $storages; ?>,//仓库        
                category_name:{},//产品分类
                total:'',   //分页总页数      
                tablelist:[] , 
                total_actual_price:'',//zone总库存值
                total_available_quantity:'',//zone总库可售数
                total_inventory_quantity:'',//zone总库存数         
                searchForm: {             
                
                    localsku: '',
                    status:'',
                    category_name:'',  
                    create_time:'',
                    storage_id:'',
                    pagenum: 1,
                    pagesize: 20,             
                },  
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                        }
                    }]
                },    
            
                        
            }
        },
        mounted(){        
            this.getSearch()
        },
        methods: {     

            async getDatalist() {
                const res = await axios.post('/admin/stroages/storageslist', {params: this.searchForm})
                    if (res.status !== 1) {
                        return this.$message.error(res.info);
                    }
                this.total = res.info.total
                this.tablelist = res.info.list
                this.total_actual_price = res.info.total_count.total_actual_price//总库值
                this.total_available_quantity = res.info.total_count.total_available_quantity//总库可售数
                this.total_inventory_quantity = res.info.total_count.total_inventory_quantity//总库存数

            },
                
            handleSizeChange(newSize) {
                this.searchForm.pagesize = newSize
                this.getDatalist()
            },
            handleCurrentChange(newPage) {
                this.searchForm.pagenum = newPage
                this.getDatalist()
            },   
            getSearch() {
                this.searchForm.pagenum = 1
                this.getDatalist()
            },           
            //导出
            getExport() {     
                window.location.href= '/admin/stroages/storageslistExport?category_name='+this.searchForm.category_name+'&localsku='+this.searchForm.localsku+'&create_time='+this.searchForm.create_time+'&storage_id='+this.searchForm.storage_id;
            }
        }
    })
</script>
</body>
</html>
